<template id='TP'>
  <div class="Box">
    <Title/>
    <div class="Class">
    <button>蛋糕</button>
    <button>面包</button>
    <button>冰淇淋</button>
    <button>下午茶</button>
    </div>
    <ul class="Content">
    <li class="Cake">
      <div class="One">
          <div class="Love">
              <img src="../assets/栗蓉暗香.png" alt="">
              <h3 class="p-one">Deep Bailey's Lovers</h3>
              <p class="p-two">深爱</p>
              <p class="p-three">/奶油中调入玫瑰甘露，整体色32154654564</p>
              <p class="p-four">￥268.0</p>
              <p class="p-four">454g/1.0磅</p>
              <span><van-icon name="shopping-cart-o" /></span>
          </div>
          <div class="Cm">
              <img src="../assets/黑森林.png" alt="">
              <p class="p-one">Strawberry Cream Cake</p>
              <p class="p-two">草莓奶油蛋糕</p>
              <p class="p-three">/草莓配奶油，从王室，前往温...</p>
              <p class="p-four">￥228.0</p>
              <p class="p-four">908g/2.0磅</p>
              <span><van-icon name="shopping-cart-o" /></span>
          </div>
      </div>
      <div class="One">
          <div class="Love">
              <img src="../assets/栗蓉暗香.png" alt="">
              <h3 class="p-one">Deep Bailey's Lovers</h3>
              <p class="p-two">深爱</p>
              <p class="p-three">/奶油中调入玫瑰甘露，整体...</p>
              <p class="p-four">￥268.0</p>
              <p class="p-four">454g/1.0磅</p>
              <span><van-icon name="shopping-cart-o" /></span>
          </div>
          <div class="Cm">
              <img src="../assets/黑森林.png" alt="">
              <p class="p-one">Strawberry Cream Cake</p>
              <p class="p-two">草莓奶油蛋糕</p>
              <p class="p-three">/草莓配奶油，从王室，前往温...</p>
              <p class="p-four">￥228.0</p>
              <p class="p-four">908g/2.0磅</p>
              <span><van-icon name="shopping-cart-o" /></span>
          </div>
      </div>
      <div class="One">
          <div class="Love">
              <img src="../assets/栗蓉暗香.png" alt="">
              <h3 class="p-one">Deep Bailey's Lovers</h3>
              <p class="p-two">深爱</p>
              <p class="p-three">/奶油中调入玫瑰甘露，整体...</p>
              <p class="p-four">￥268.0</p>
              <p class="p-four">454g/1.0磅</p>
              <span><van-icon name="shopping-cart-o" /></span>
          </div>
          <div class="Cm">
              <img src="../assets/黑森林.png" alt="">
              <p class="p-one">Strawberry Cream Cake</p>
              <p class="p-two">草莓奶油蛋糕</p>
              <p class="p-three">/草莓配奶油，从王室，前往温...</p>
              <p class="p-four">￥228.0</p>
              <p class="p-four">908g/2.0磅</p>
              <span><van-icon name="shopping-cart-o" /></span>
          </div>
      </div>
      <div class="One">
          <div class="Love">
              <img src="../assets/栗蓉暗香.png" alt="">
              <h3 class="p-one">Deep Bailey's Lovers</h3>
              <p class="p-two">深爱</p>
              <p class="p-three">/奶油中调入玫瑰甘露，整体...</p>
              <p class="p-four">￥268.0</p>
              <p class="p-four">454g/1.0磅</p>
              <span><van-icon name="shopping-cart-o" /></span>
          </div>
          <div class="Cm">
              <img src="../assets/黑森林.png" alt="">
              <p class="p-one">Strawberry Cream Cake</p>
              <p class="p-two">草莓奶油蛋糕</p>
              <p class="p-three">/草莓配奶油，从王室，前往温...</p>
              <p class="p-four">￥228.0</p>
              <p class="p-four">908g/2.0磅</p>
              <span><van-icon name="shopping-cart-o" /></span>
          </div>
      </div>
      <div class="One">
          <div class="Love">
              <img src="../assets/栗蓉暗香.png" alt="">
              <h3 class="p-one">Deep Bailey's Lovers</h3>
              <p class="p-two">深爱</p>
              <p class="p-three">/奶油中调入玫瑰甘露，整体...</p>
              <p class="p-four">￥268.0</p>
              <p class="p-four">454g/1.0磅</p>
              <span><van-icon name="shopping-cart-o" /></span>
          </div>
          <div class="Cm">
              <img src="../assets/黑森林.png" alt="">
              <p class="p-one">Strawberry Cream Cake</p>
              <p class="p-two">草莓奶油蛋糕</p>
              <p class="p-three">/草莓配奶油，从王室，前往温...</p>
              <p class="p-four">￥228.0</p>
              <p class="p-four">908g/2.0磅</p>
              <span><van-icon name="shopping-cart-o" /></span>
          </div>
      </div>
      <div class="One">
          <div class="Love">
              <img src="../assets/栗蓉暗香.png" alt="">
              <h3 class="p-one">Deep Bailey's Lovers</h3>
              <p class="p-two">深爱</p>
              <p class="p-three">/奶油中调入玫瑰甘露，整体...</p>
              <p class="p-four">￥268.0</p>
              <p class="p-four">454g/1.0磅</p>
              <span><van-icon name="shopping-cart-o" /></span>
          </div>
          <div class="Cm">
              <img src="../assets/黑森林.png" alt="">
              <p class="p-one">Strawberry Cream Cake</p>
              <p class="p-two">草莓奶油蛋糕</p>
              <p class="p-three">/草莓配奶油，从王室，前往温...</p>
              <p class="p-four">￥228.0</p>
              <p class="p-four">908g/2.0磅</p>
              <span><van-icon name="shopping-cart-o" /></span>
          </div>
      </div>
      <div class="One">
          <div class="Love">
              <img src="../assets/栗蓉暗香.png" alt="">
              <h3 class="p-one">Deep Bailey's Lovers</h3>
              <p class="p-two">深爱</p>
              <p class="p-three">/奶油中调入玫瑰甘露，整体...</p>
              <p class="p-four">￥268.0</p>
              <p class="p-four">454g/1.0磅</p>
              <span><van-icon name="shopping-cart-o" /></span>
          </div>
          <div class="Cm">
              <img src="../assets/黑森林.png" alt="">
              <p class="p-one">Strawberry Cream Cake</p>
              <p class="p-two">草莓奶油蛋糕</p>
              <p class="p-three">/草莓配奶油，从王室，前往温...</p>
              <p class="p-four">￥228.0</p>
              <p class="p-four">908g/2.0磅</p>
              <span><van-icon name="shopping-cart-o" /></span>
          </div>
      </div>
      <div class="One">
          <div class="Love">
              <img src="../assets/栗蓉暗香.png" alt="">
              <h3 class="p-one">Deep Bailey's Lovers</h3>
              <p class="p-two">深爱</p>
              <p class="p-three">/奶油中调入玫瑰甘露，整体...</p>
              <p class="p-four">￥268.0</p>
              <p class="p-four">454g/1.0磅</p>
              <span><van-icon name="shopping-cart-o" /></span>
          </div>
          <div class="Cm">
              <img src="../assets/黑森林.png" alt="">
              <p class="p-one">Strawberry Cream Cake</p>
              <p class="p-two">草莓奶油蛋糕</p>
              <p class="p-three">/草莓配奶油，从王室，前往温...</p>
              <p class="p-four">￥228.0</p>
              <p class="p-four">908g/2.0磅</p>
              <span><van-icon name="shopping-cart-o" /></span>
          </div>
      </div>
      <div class="One">
          <div class="Love">
              <img src="../assets/栗蓉暗香.png" alt="">
              <h3 class="p-one">Deep Bailey's Lovers</h3>
              <p class="p-two">深爱</p>
              <p class="p-three">/奶油中调入玫瑰甘露，整体...</p>
              <p class="p-four">￥268.0</p>
              <p class="p-four">454g/1.0磅</p>
              <span><van-icon name="shopping-cart-o" /></span>
          </div>
          <div class="Cm">
              <img src="../assets/黑森林.png" alt="">
              <p class="p-one">Strawberry Cream Cake</p>
              <p class="p-two">草莓奶油蛋糕</p>
              <p class="p-three">/草莓配奶油，从王室，前往温...</p>
              <p class="p-four">￥228.0</p>
              <p class="p-four">908g/2.0磅</p>
              <span><van-icon name="shopping-cart-o" /></span>
          </div>
      </div>
      <div class="One">
          <div class="Love">
              <img src="../assets/栗蓉暗香.png" alt="">
              <h3 class="p-one">Deep Bailey's Lovers</h3>
              <p class="p-two">深爱</p>
              <p class="p-three">/奶油中调入玫瑰甘露，整体...</p>
              <p class="p-four">￥268.0</p>
              <p class="p-four">454g/1.0磅</p>
              <span><van-icon name="shopping-cart-o" /></span>
          </div>
          <div class="Cm">
              <img src="../assets/黑森林.png" alt="">
              <p class="p-one">Strawberry Cream Cake</p>
              <p class="p-two">草莓奶油蛋糕</p>
              <p class="p-three">/草莓配奶油，从王室，前往温...</p>
              <p class="p-four">￥228.0</p>
              <p class="p-four">908g/2.0磅</p>
              <span><van-icon name="shopping-cart-o" /></span>
          </div>
      </div>
      <div class="One">
          <div class="Love">
              <img src="../assets/栗蓉暗香.png" alt="">
              <h3 class="p-one">Deep Bailey's Lovers</h3>
              <p class="p-two">深爱</p>
              <p class="p-three">/奶油中调入玫瑰甘露，整体...</p>
              <p class="p-four">￥268.0</p>
              <p class="p-four">454g/1.0磅</p>
              <span><van-icon name="shopping-cart-o" /></span>
          </div>
          <div class="Cm">
              <img src="../assets/黑森林.png" alt="">
              <p class="p-one">Strawberry Cream Cake</p>
              <p class="p-two">草莓奶油蛋糕</p>
              <p class="p-three">/草莓配奶油，从王室，前往温...</p>
              <p class="p-four">￥228.0</p>
              <p class="p-four">908g/2.0磅</p>
              <span><van-icon name="shopping-cart-o" /></span>
          </div>
      </div>
      <div class="One">
          <div class="Love">
              <img src="../assets/栗蓉暗香.png" alt="">
              <h3 class="p-one">Deep Bailey's Lovers</h3>
              <p class="p-two">深爱</p>
              <p class="p-three">/奶油中调入玫瑰甘露，整体...</p>
              <p class="p-four">￥268.0</p>
              <p class="p-four">454g/1.0磅</p>
              <span><van-icon name="shopping-cart-o" /></span>
          </div>
          <div class="Cm">
              <img src="../assets/黑森林.png" alt="">
              <p class="p-one">Strawberry Cream Cake</p>
              <p class="p-two">草莓奶油蛋糕</p>
              <p class="p-three">/草莓配奶油，从王室，前往温...</p>
              <p class="p-four">￥228.0</p>
              <p class="p-four">908g/2.0磅</p>
              <span><van-icon name="shopping-cart-o" /></span>
          </div>
      </div>
      <div class="One">
          <div class="Love">
              <img src="../assets/栗蓉暗香.png" alt="">
              <h3 class="p-one">Deep Bailey's Lovers</h3>
              <p class="p-two">深爱</p>
              <p class="p-three">/奶油中调入玫瑰甘露，整体...</p>
              <p class="p-four">￥268.0</p>
              <p class="p-four">454g/1.0磅</p>
              <span><van-icon name="shopping-cart-o" /></span>
          </div>
          <div class="Cm">
              <img src="../assets/黑森林.png" alt="">
              <p class="p-one">Strawberry Cream Cake</p>
              <p class="p-two">草莓奶油蛋糕</p>
              <p class="p-three">/草莓配奶油，从王室，前往温...</p>
              <p class="p-four">￥228.0</p>
              <p class="p-four">908g/2.0磅</p>
              <span><van-icon name="shopping-cart-o" /></span>
          </div>
      </div>
    </li>
    <li class="Break">222</li>
    <li class="Ice-Cream">333</li>
    <li class="After-Tea">444</li>
    </ul>
  </div>
</template>

<style scoped lang="less">

   @baseFont:20;
  *{
      margin: 0;
      padding: 0;
      list-style: none;
    //   text-align: center;
    }

    html{
      font-size: @baseFont*1px;
    }

    .px2rem(@name,@px){
        @{name}:@px/@baseFont/2*1rem;
    }
   
  .Box{
      
    .Class{
      .px2rem(height,140);
      width: 100%;
      display: flex;
      justify-content:space-around;
      border-bottom: 1px solid #eee;
      
       button{
        flex: 1; 
       border: 0;
      background-color: transparent;
      outline: none;
      }
      button:active{
        background: rgb(245, 243, 243);
      }
    }

    .Cake{
      .px2rem(height,12500);
      .px2rem(margin-top,80);
      text-align: left;
      .One{
          .px2rem(height, 900);
           width: 100%;
          display: flex;


            .Love{
              .px2rem(height, 900);
              .px2rem(margin-left, 40);
              flex: 1;
              position: relative;
              
              img{
                // .px2rem(width, 488);
                .px2rem(height, 550);
              }

              .p-one{
                .px2rem(margin-left, 50);
                .px2rem(font-size, 45);
                color: black;
                font-weight: bolder;
              }
              .p-two{
                .px2rem(margin-left, 50);
                .px2rem(margin-top, 10);
                .px2rem(font-size, 40);
                
                // letter-spacing: 1;
                color: black;
              }
              .p-three{
                .px2rem(margin-left, 50);
                .px2rem(margin-top, 8);
                color: #9b9b9b;
                // .px2rem(letter-spacing, 0.5);
                .px2rem(font-size, 38);
                .px2rem(width,550);
                .px2rem(height,50);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .p-four{
                .px2rem(margin-left, 50);
                color: #9b9b9b;
                font-weight: bolder;
                .px2rem(font-size, 38);
              }
               span{
                 .px2rem(font-size, 80);
                 font-weight: bolder;
                 position: absolute;
                 .px2rem(right, 220);
                 .px2rem(bottom, 60);
                }
          }

          .Cm{
            .px2rem(height, 900);
            flex: 1;
            position: relative;
             
             img{
                .px2rem(height, 550);
              }
               .p-one{
                .px2rem(margin-left, 50);
                .px2rem(font-size, 45);
                font-weight: bolder;
                color: black;
              }
              .p-two{
                .px2rem(margin-left, 50);
                .px2rem(margin-top, 10);
                .px2rem(font-size, 40);
                color: black;
              }
              .p-three{
                .px2rem(margin-left, 50);
                .px2rem(margin-top, 8);
                color: #9b9b9b;
                .px2rem(font-size, 38);
                .px2rem(width,550);
                .px2rem(height,50);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .p-four{
                .px2rem(margin-left, 50);
                color: #9b9b9b;
                font-weight: bolder;
                .px2rem(font-size, 38);
              }
                span{
                 .px2rem(font-size, 80);
                 font-weight: bolder;
                 position: absolute;
                 .px2rem(right, 220);
                 .px2rem(bottom, 60);
                }

        }
       
      }
    }

}
</style>

<script>
  window.onload = window.onresize = function () {
    document.documentElement.style.fontSize = 20 * document.documentElement.clientWidth / 750 + 'px';
  };

</script>  
<script>
    import Vue from 'vue';
    import Title from '../components/Title';
    import { Icon,Button } from 'vant';
    import axios from 'axios';
    // import 'vue.config.js' from '/vue'
    Vue.use(Icon);
    Vue.use(Button);
    Vue.use(axios);

    export default{
      name:'Header',
     
      components: {
        Title
      },

      data () {
        return {
          msg:'馨怡蛋糕即刻享受',
          goodsArr:[]
        }
      },

       created () {
         this.axios.get('/api/getClass')
         .then((res)=>{
           this.goodsArr=res.data.data;
           console.log(res.data.data)
         }).catch((error)=>{
            console.log(error)
         })
       },


       methods: {

      },
    }
      
     
   
    
</script>